<template>
    <div class="system-tags" v-show="tagsList.length">
        <ul class="tags-list">
            <li class="tags-item" v-for="(item,index) in tagsList" :class="{'is-active': isActive(item.path)}" :key="index">
                <router-link :to="item.fullPath" class="item-title">
                    {{item.title}}
                </router-link>
                <el-tooltip content="ALT + W 快捷关闭">
                    <span class="item-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
                </el-tooltip>
            </li>
        </ul>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags" placement="bottom-end">
                <div class="tags-close-button">
                    标签选项<i class="el-icon-arrow-down"></i>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="other">关闭其它</el-dropdown-item>
                        <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'system-tags',
        data () {
            return {
                tagsList: []
            }
        },
        watch: {
            $route: {
                immediate: true,
                handler (newVal) {
                    if (newVal && newVal.matched && newVal.matched.length) {
                        this.setTags(newVal)
                    }
                }
            }
        },
        methods: {
            isActive (path) {
                return path === this.$route.path
            },
            // 关闭单个标签
            closeTags (index) {
                const currentItem = this.tagsList.splice(index, 1)[0]
                // 移除对应页面的keep-alive
                this.$store.commit('SET_TAGSLIST', this.tagsList)
                // 关闭项为当前激活页面
                if (currentItem.path === this.$route.path) {
                    // 是否有相邻项
                    const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]
                    if (item) {
                        this.$router.push(item.fullPath)
                    } else {
                        this.$router.push('/')
                    }
                }
            },
            // 关闭全部标签
            closeAll () {
                this.tagsList = []
                this.$router.push('/')
                this.$store.commit('SET_TAGSLIST', this.tagsList)
            },
            // 关闭其他标签
            closeOther () {
                this.tagsList = this.tagsList.filter(item => {
                    return item.path === this.$route.path
                })
                this.$store.commit('SET_TAGSLIST', this.tagsList)
            },
            // [新增标签 | 切换标签]
            setTags (route) {
                const isExist = this.tagsList.some(item => {
                    return item.path === route.path
                })

                if (isExist) { return }

                if (this.tagsList.length >= 8) {
                    this.tagsList.shift()
                }
                this.tagsList.push({
                    title: route.meta.title,
                    path: route.path,
                    fullPath: route.fullPath,
                    // name 必要 keep-alive include
                    name: route.matched[0].components.default.name
                })
                this.$store.commit('SET_TAGSLIST', this.tagsList)
            },
            handleTags (command) {
                command === 'other' ? this.closeOther() : this.closeAll()
            }
        }
    }

</script>

<style lang="scss">
.system-tags {
    position: relative;
    padding-right: 120px;
    background: #f7f7f7;
    z-index: 99;
    border-radius: 17px;
    overflow: hidden;
    margin-bottom: 10px;

    .tags-list {
        display: flex;
        align-items: center;
        padding: 6px 10px;

        .tags-item {
            margin-right: 5px;
            border-radius: 11px;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid #e5e5e5;
            background: #fff;
            padding: 2px 7px 2px 12px;
            color: #666;
            white-space: nowrap;

            .item-title {
                display: inline-block;
                max-width: 80px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-right: 5px;
                color: #666;
                vertical-align: bottom;
            }

            .item-icon {
                font-size: 12px;
            }

            &.is-active {
                color: #fff;
                border-color: #409EFF;
                background-color: #409EFF;

                .item-title {
                    color: #fff;
                }
            }

            &:not(.is-active):hover {
                background: rgba($color: #409EFF, $alpha: 0.1);
                border-color: rgba($color: #409EFF, $alpha: 0.1);
            }
        }
    }

    .tags-close-box {
        position: absolute;
        top: 3px;
        right: 3px;
        bottom: 3px;
        z-index: 10;
        border-radius: 17px;
        overflow: hidden;

        .tags-close-button {
            width: 90px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            background-color: #409EFF;
            color: #fff;
            font-size: 12px;
            border-radius: 2px;
            border-radius: 12px;

            .icon-down {
                margin-left: 6px;
                font-size: 12px;
            }
        }
    }
}
</style>
